<template>
    <view>
        <view class="loading-container">
            <image src="./image/loading.png" class="load-img" mode="widthFix"></image>
            <svg class="load-ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;"></ellipse>
            </svg>
            <view class="text" v-if="text">{{text}}</view>
        </view>
        <view class="load-bg"></view>
    </view>
</template>

<script>
    /**
     * Icons 图标
     * @description 用于展示 icons 图标
     * @property {Number} size 图标大小
     * @property {String} color 图标颜色
     * @event {Function} click 点击 Icon 触发事件
     */
    export default {
        name: 'dxLoading',
        props: {
            text: {
                type: String,
                default: ''
            }
        },
        data() {
            return {};
        },
        methods: {
        }
    };
</script>

<style lang="less" scoped>

    @keyframes load {
        0%   {transform: translateY(0px);}
        50%  {transform: translateY(-50px);}
        100% {transform: translateY(0px);}
    }
    @keyframes ellipse {
        0%   {
            transform: scale(1);
            transform-origin: 50% 100%;
        }
        50%  {
            transform: scale(0.3);
            transform-origin: 50% 100%;
        }
        100% {
            transform: scale(1);
            transform-origin: 50% 100%;
        }
    }
    .loading-container{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150rpx;
        // height: 150rpx;
        z-index: 9999;
    }
    .load-img {
        width: 150rpx;
        transform: translateY(0px);
        animation: load .6s infinite ease-in-out;
        position: relative;
    }
    .load-bg {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, .8);
        z-index: 9998;

    }
    .load-ellipse {
        display: block;
        width: 104rpx;
        height: 40rpx;
        margin: 0 auto;
        animation: ellipse .6s infinite ease-in-out;
    }

    .text {
        margin-top: 20rpx;
        font-size: 30rpx;
        text-align: center;
    }
        
</style>
